<template>
  <div class="container">
    <div class="content">
      <div class="left">
        <div class="title">
          <h2>China's Reliable Safety Equipment Supplier</h2>
        </div>
        <div class="detail">
          <p>
            We are the PPE manufacturers and safety equipment suppliers in
            China, For our products are used primarily in the oil and gas, and
            construction industries. We have our own safety shoe factory and a
            safety clothing factory that can produce different types of personal
            protective equipment, such as safety shoes, flame retardant
            coveralls, workwear, safety gloves, helmets, earplugs, safety
            harness , safety glasses and more.
          </p>
        </div>
        <div class="pic">
          <div class="pic-item" v-for="index in 4" :key="index">
            <img src="../../assets/images/home2.jpg" alt="Safety Shoes" />
          </div>
        </div>
      </div>
      <div class="right">
        <Form />
      </div>
    </div>
  </div>
</template>

<script setup>
import Form from "./form.vue";
</script>

<style scoped lang='scss'>
.container {
  width: 100%;
  background: #0b5d98;

  .content {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 110px;
    align-items: flex-start; // 关键：将子元素顶部对齐，使负边距生效

    .left {
      width: 570px;
      padding-top: 120px;

      .title {
        width: 100%;
        font-size: 32px;
        font-weight: 700;
        color: white;
        font-family: "Roboto Condensed", sans-serif;
        line-height: 1.3;
        padding-bottom: 15px;
      }
      p {
        color: white;
        line-height: 1.5;
      }
      .pic {
        display: flex;
        justify-content: center;
        align-items: center;
        .pic-item {
          padding: 10px;
          img {
            width: 100%;
          }
        }
      }
    }

    .right {
      background: #0b5d98;
    }
  }
}
</style>
